<template>
  <div class="panel">
    <panel-title></panel-title>
    <div class="panel-body">
      <!--table顶部的查询,新增和批量删除-->
      <el-row>
        <el-form :inline="true"  :model="searchForm" class="form-inline">
          <el-form-item label="姓名：">
              <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
          </el-form-item>
            <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" @click="searchClick">查询</el-button>
            <el-button type="success" icon="el-icon-plus" size="small" @click="dialogVisible = true">新增</el-button>
            <el-button type="warning" icon="el-icon-delete" size="small" @click="allDelete">批量删除</el-button>
          </el-form-item>
        </el-form>
      </el-row>
<!--新增弹窗版面-->
      <el-dialog
        title="创建"
        :visible.sync="dialogVisible"
        width="800"
        :before-close="handleClose">
      <!--  
        <el-form  :model="addForm" :inline="true" >
          <el-form-item label="日期：">
            <el-input v-model="addForm.date" placeholder="请输入日期"></el-input>
          </el-form-item>
          <el-form-item label="姓名：">
            <el-input v-model="addForm.name" placeholder="请输入姓名"></el-input>
          </el-form-item>      
          <el-form-item label="手机号码：">
            <el-input v-model="addForm.number" placeholder="手机号码"></el-input>
          </el-form-item>
        </el-form>
-->     
        <el-form  :model="addForm" :inline="true" class="add-form">
          <el-row>
            <el-col :span="3">

              <i>省份</i>
            </el-col>
            <el-col :span="8">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="3">
              <i>上级机构</i>
              
            </el-col>
            <el-col :span="8">
              <!-- <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select> -->
            </el-col>
          </el-row>


          <el-row>
            <el-col :span="3">

              <i>城市</i>
            </el-col>
            <el-col :span="8">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="3">
              <i>学年制</i>
            </el-col>
            <el-col :span="8">
               <el-input v-model="addForm.date" placeholder="请输入"></el-input>
            </el-col>
          </el-row>


          <el-row>
            <el-col :span="3">

              <i>区域</i>
            </el-col>
            <el-col :span="8">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="3">
              <i>序号</i>
            </el-col>
            <el-col :span="8">
               <el-input v-model="addForm.date" placeholder="请输入"></el-input>
            </el-col>
          </el-row>


          <el-row>
            <el-col :span="3">

              <i>类型</i>
            </el-col>
            <el-col :span="8">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="3">
              <i>状态</i>
            </el-col>
            <el-col :span="8">
               <el-radio-group v-model="addForm.status" size="medium">
                  <el-radio border label="启用"></el-radio>
                  <el-radio border label="显示"></el-radio>
                </el-radio-group>
            </el-col>
          </el-row>



          <el-row>
            <el-col :span="3">

              <i>分类</i>
            </el-col>
            <el-col :span="8">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="3">
              <i>名称</i>
            </el-col>
            <el-col :span="8">
               <el-input v-model="addForm.date" placeholder="请输入"></el-input>
            </el-col>
          </el-row>
          <!-- <el-col :span="11">
             <el-form-item label="城市：">
                <el-input v-model="addForm.date" placeholder="请输入日期"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="11">
            <el-form-item label="学年制：">
              <el-input v-model="addForm.date" placeholder="请输入日期"></el-input>
            </el-form-item>
          </el-col> -->
        </el-form>

          <!-- <i>上级机构</i>
         <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select> -->

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="newAdd">添加</el-button>
        </span>
      </el-dialog>
    <!--table数据表-->
     <!--slice(index1,index2)函数是从数组中返回下标index1与index2之间的数据。-->
      <el-table   
        :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        border
        style="width:100% height:"
          row-style="height:40px"
            cell-style="padding:0"
        @selection-change="selsChange" ><!--selection-change为复选框选项发生改变时触发的函数-->

        <!--多选，设type属性为selection即可-->
        <el-table-column
        type="selection"
        width="50"
        label="全选"
        align="center">
        </el-table-column>

        <!--显示索引index,设置type属性为index即可显示从 1 开始的索引号。-->
        <el-table-column 
        type="index"
        width="50"
        align="center">
        </el-table-column>

        <el-table-column 
        sortable
        prop="name"
        label="姓名"
        width="180"
        align="center">
        </el-table-column>

        <el-table-column 
        sortable
        prop="number"
        label="手机号码"
        width="180"
        align="center">
        </el-table-column>

        <el-table-column 
        prop="date"
        label="创建时间"
        width="250"
        align="center">
        </el-table-column>
      <!--编辑和删除功能按钮-->
        <el-table-column 
        label="操作"
        width="180"
        align="center">
        <template slot-scope="scope">
          <el-button icon="el-icon-edit" type="info" size="small" ></el-button>
          <el-button icon="el-icon-delete" type="success" size="small" @click="deleteRow(scope.$index,tableData)"></el-button>
        </template>
        </el-table-column>
      </el-table> 
      <!--分页组件-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length">
    </el-pagination>
    </div>
  </div>
</template>
<script type="text/javascript">
import {panelTitle} from 'components'
import { setTimeout } from 'timers';

  export default {
    
    data(){
      return {
        sels:[],//设置一个数组，用于接收复选框选择的选项数据
        tableData:[],
        currentPage:1,
        pagesize:5,
        searchForm:{
          name:''
        },
        addForm:{
          date:'',
          name:'',
          number:'',
          status:''
        },
        dialogVisible:false,

        //table表数据，如果连上数据库即取代该部分。
       tableData:[{
         date:'2018-12-07',
         name:'黄斐缓',
         number:"13300909"
       },{
         date:'2018-12-02',
         name:'崔晓凤',
         number:"1330090933"
       },{
         date:'2018-12-04',
         name:'李拯',
         number:"1350090933"
       },{
         date:'2018-12-11',
         name:'郭丽萍 Ray Kwok',
         number:"123"
       },{
         date:'2018-12-05',
         name:'刘绮婷 Kristin Liu',
         number:"123"
       },{
         date:'2018-11-05',
         name:'玉珏 Giselle Wong',
        number:"18520006621"
       },{
         date:'2017-12-05',
         name:'袁青莲 Alice Yuan',
         number:"18520006621"
       },{
         date:'2018-12-05',
         name:'蔡朝红 Jenny Choi',
          number:"18520006621"
       }]
      }
    },
    components: {
      panelTitle
    },
    
    methods:{
      //表格重新加载数据：用于对数据库添加或删除数据后重新加载到页面。
      loadingData:function(){
        this.loading=true;
        setTimeout(function(){//等待300毫秒后执行前面这些代码（这里是指这具function()函数）
          console.log('数据加载成功');
          this.loading=false
        },300);
      },
      //删除功能js函数。
      deleteRow:function(index,rows){
        console.log(rows[index]);
        this.$confirm('确认删除:'+rows[index].name+'?','提示',{
          confirmButtonText:'确认',
          cancelButtonText:'取消',
          type:'waring'
        }).then(()=>{
           rows.splice(index,1);
           
           this.$message({
             type:'success',
             message:'删除成功！'
           });
          this.loadingData();//重新加载数据,因为为本地数据所以可没什么效果、当从数据库删除数据时页面就要重新加载数据了。 
        }).catch(()=>{
           this.$message({
             type:'info',
             message:'已取消删除！'
           });
        });    
      },
      //查询功能js函数
    searchClick:function(searchForm){
      console.log('输入的数据：'+this.searchForm.name);
    },
    //每页显示的数据数目size发生改变时触发的函数
    handleSizeChange:function(size){
      this.pagesize=size;
    },
    //改变当前页currentpage时触发的函数
    handleCurrentChange:function(currentPage){
      this.currentPage=currentPage;
    },
    //复选框选项发生改变时触发的函数
    selsChange:function(sels){
      this.sels=sels;
      console.log('1111111'+this.sels)
    },
    //点击批量删除按钮时触发的函数。
    allDelete:function(){
       console.log('2222'+this.sels);
       
    },
    //新增弹窗关闭按钮
     handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //点击弹窗的确定按钮，将数据添加到table.
      newAdd:function(addForm){
       this.tableData.unshift({
         date:this.addForm.date,
         name:this.addForm.name,
         number:this.addForm.number
       }),
       this.dialogVisible = false; 
      },

      }
    }
    //
  
</script>
<style scope>
  .add-form .el-row{
    margin-bottom:20px;
  }
  .add-form .el-row i{
    display: inline-block;
    padding-top:12px;
  }
</style>